const typeMap = {
  primary: 'btn--primary',
  secondary: 'btn--secondary',
  ghost: 'btn--ghost',
  danger: 'btn--danger',
  plain: 'btn--plain'
};

const sizeMap = {
  large: 'size-large',
  medium: 'size-medium',
  small: 'size-small'
};

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },

  properties: {
    text: {
      type: String,
      value: ''
    },
    type: {
      type: String,
      value: 'primary'
    },
    size: {
      type: String,
      value: 'large'
    },
    loading: {
      type: Boolean,
      value: false
    },
    disabled: {
      type: Boolean,
      value: false
    },
    block: {
      type: Boolean,
      value: true
    },
    icon: {
      type: String,
      value: ''
    }
  },

  data: {
    typeClass: 'btn--primary',
    sizeClass: 'size-large'
  },

  lifetimes: {
    attached() {
      this.updateClasses();
    }
  },

  observers: {
    type() {
      this.updateClasses();
    },
    size() {
      this.updateClasses();
    }
  },

  methods: {
    updateClasses() {
      const typeClass = typeMap[this.data.type] || typeMap.primary;
      const sizeClass = sizeMap[this.data.size] || sizeMap.large;
      this.setData({ typeClass, sizeClass });
    },

    handleTap() {
      if (this.data.disabled || this.data.loading) {
        return;
      }
      this.triggerEvent('tap');
    }
  }
});
